<template>
	<view class="order_item_com">
		<view class="item_top" @click="navSwitch('/pages/order/details/index?id=' + value.id)">
			<view
				class="order_state"
				:style="{ color: orderState[value.orderStatus].color }"
			>
				<span v-if="value.orderStatus === 0">{{ orderState[value.orderStatus].text[value.toBePaySonState] }}</span>
				<span v-else-if="value.orderStatus === -1">{{ orderState[value.orderStatus].text[value.orderCancelType] }}</span>
				<span v-else>{{ orderState[value.orderStatus].text }}</span>
			</view>
			<view class="goods_img">
				<u-image
					width="100%"
					height="100%"
					:src="value.goodsImgUrl"
				></u-image>
				<view class="tip">{{ value.goodNum }}{{$t('locales.products')}}</view>
			</view>
			<view class="item_info">
				<view class="info">
					<view class="item_price">
						{{$t('locales.total')}}：{{$store.getters.currency}}{{ value.paymentPriceBig }}
					</view>
					<view class="time">
						{{$t('locales.orderTime')}}：{{ value.orderCreateTime }}
					</view>
				</view>
				<u-icon name="arrow-right" color="#ddd" size="28"></u-icon>
			</view>
		</view>
		<view class="item_bottom">
			<u-button
				style="margin-right: 20rpx"
				plain
				type="success"
				size="mini"
				shape="circle"
				class="contact-button"
				@click="contact(value.domainPrefix)"
			>
				{{ $t('locales.contactMerchants') }}
			</u-button>
			<u-button
				type="primary"
				size="mini"
				shape="circle"
				@click="navSwitch('/pages/order/details/index?id=' + value.id)"
			>
				{{$t('locales.viewOrder')}}
			</u-button>
		</view>
	</view>
</template>

<script>
import { getStoreContactWay } from '@/api/http/store'
export default {
	props: {
		value: {
			type: Object,
			default: () => {}
		}
	},
	data() {
		return {
			orderState: {
				0: {
					color: '#FF1010',
					text: {
            0: this.$t('locales.pendingPayment'),
            1: this.$t('locales.qualificationProgress'),
            2: this.$t('locales.qualificationSuccess'),
            3: this.$t('locales.orderState4'),
            4: this.$t('locales.paymentReview'),
            5: this.$t('locales.paymentFailed'),
          }
				},
				1: {
					color: '#15B377',
					text: this.$t('locales.toBeDelivered')
				},
				2: {
					color: '#15B377',
					text: this.$t('locales.goodsToBeReceived')
				},
				3: {
					color: '#15B377',
					text: this.$t('locales.transactionCompletion')
				},
				'-1': {
					color: '#888888',
					text: {
            0: this.$t('locales.refund'),
            1: this.$t('locales.merchantCancel'),
            2: this.$t('locales.buyerCancels'),
            3: this.$t('locales.timeOutCancel'),
            4: this.$t('locales.qualificationFailed')
          }
				},
				'-2': {
					color: '#888888',
					text: this.$t('locales.cancelling')
				}
			}
		}
	},
	methods: {
		navSwitch(url) {
			uni.navigateTo({
				url
			})
		},
		// 联系商家
    contact(domainPrefix) {
      getStoreContactWay({
        domainPrefix
      }).then((res) => {
        if (res.code === 200) {
          uni.showModal({
            content: this.$t('locales.contactInfo') + '：' + res.data.contactInfo,
            showCancel: false,
            confirmText: this.$t('locales.roger'),
            confirmColor: '#0049AC',
            success: (res) => {}
          })
        } else {
          uni.showToast({
            title: res.message,
            icon: 'none'
          })
        }
      })
    }
	}
}
</script>

<style lang="scss" scoped>
.order_item_com {
	margin: 20rpx;
	background-color: #ffffff;
	border-radius: 12px;
	.item_top {
		display: flex;
		padding: 30rpx;
		box-sizing: border-box;
		border-bottom: 1px solid #d4d4d4;
		position: relative;
		.order_state {
			right: 50rpx;
			top: 30rpx;
			position: absolute;
		}
		.goods_img {
			width: 185rpx;
			height: 185rpx;
			border: 1px solid #ddd;
			border-radius: 12px;
			overflow: hidden;
			position: relative;
			margin-right: 30rpx;
			.tip {
				position: absolute;
				left: 0;
				bottom: 0;
				width: 185rpx;
				height: 34rpx;
				background: rgba($color: #000, $alpha: 0.2);
				text-align: center;
				line-height: 34rpx;
				font-size: 24rpx;
				color: #fff;
			}
		}
		.item_info {
			display: flex;
			flex: 1;
			.info {
				display: flex;
				width: 380rpx;
				flex: 1;
				flex-direction: column;
				justify-content: center;
				.item_price {
					font-size: 36rpx;
					margin-bottom: 20rpx;
				}
				.time {
					font-size: 26rpx;
					color: #444;
				}
			}
		}
	}
	.item_bottom {
		height: 88rpx;
		line-height: 88rpx;
		text-align: right;
		padding: 0 30rpx;
		box-sizing: border-box;
	}
}

.contact-button {
	border-color: #0049ac!important;
	color: #0049ac!important;
	background-color: #fff!important;
}
</style>
